<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/layouts/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加视频</title>
    <%@include file="/WEB-INF/layouts/edit-header.jsp"%>
    <style type="text/css">
        .upload-tips {
            font-weight: 400;
            font-style: normal;
            padding-bottom: 6px;
            color: #8d8d8d;
        }
    </style>
</head>
<body>

<div class="create-page tpanel">
    <div class="panel-content">
        <div class="container-fluid">

            <form id="createForm" class="form-horizontal" enctype="multipart/form-data"
                action="${ctx}/admin/wechat/video/upload" method="post">
                <div class="form-group form-group-first">
                    <label for="uploadVideo" class="col-sm-2 control-label">上传视频</label>
                    <div class="col-sm-8">
                        <div>
                            <div class="upload-tips">
                                视频不能超过20M，超过20M的视频可至腾讯视频上传后添加，
                                也可通过添加视频详情页链接以及公众号文章链接插入视频，视频时长不少于1秒，
                                不多于10小时，支持大部分主流视频格式
                            </div>
                            <div id="uploadVideo">
                                <button id="browseFile" type="button" class="btn btn-success"> 选择文件</button>
                                <input type="file" id="file" name="file" accept="video/*" required
                                    style="width: 100%; height: 0px; opacity: 0; left: 0; right: 0;" onchange="checkFile(this)">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="videoTitle" class="col-sm-2 control-label">标题</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control"
                               id="videoTitle" name="title"
                               value=""
                               placeholder="请输入标题(必填)" required
                               minlength="0" maxlength="21"
                        />
                    </div>
                </div>

                <div class="form-group">
                    <label for="cover" class="col-sm-2 control-label">封面</label>
                    <div class="col-sm-8">
                        <div id="cover" style="vertical-align: middle; padding-top: 6px;">
                            视频转码完成后可以在<strong>编辑页面</strong>设置封面图
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="introduce" class="col-sm-2 control-label">简介</label>
                    <div class="col-sm-8">
                        <textarea id="introduce" name="introduce" rows="5" class="form-control"
                                  maxlength="120" required></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12" style="text-align: center;">
                        <a class="btn btn-default" href="javascript:window.history.back();">返回</a>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="submit" class="btn btn-primary" value="保存" />
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    changeTitle('添加视频');

    $(function() {
        $("#browseFile").bind('click', function () {
            $("#file").click();
        });
    });

    function checkFile(file) {
        var filePath = file.value;
        var fileExt = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
        <%--avi,divx,flv,mp4,m4v,mkv,mov,wmv,mpg,mpeg,ogm,ogv,ogx,rm,rmvb,smil,webm,xvid--%>
        if (!fileExt.match(/.avi|.divx|.flv|.mp4|.m4v|.mkv|.mov|.wmv|.mpg|.mpeg|.ogm|.ogv|.ogx|.rm|.rmvb|.smil|.webm|.xvid/i)) {
            topLayer.msg("您选择的文件格式不正确, 请重新选择", { icon: 1});
            file.value = "";
            return;
        }
        if (file.files && file.files[0]) {
            if ((file.files[0].size / 1024 / 1024) > 20) {
                topLayer.msg("视频大小不能超过20M, 请重新选择", { icon: 1 });
                file.value = "";
                return;
            }
        }
    }
</script>
</body>
</html>
